<template>
  <div class="container">
    <!-- 顶部按钮区域 -->
    <div class="header">
      <el-form
        :inline="true"
        class="demo-form-inline"
        size="small"
        label-min-width="80px"
      >
        <!-- <el-form-item label="所属部门">
          <el-select v-model="queryData.deptId" placeholder="部门账号">
            <el-option v-for="item in bmzhanghao" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="案件ID">
          <el-input v-model="queryData.caseMainId" placeholder="案件ID" />
        </el-form-item>
        <el-form-item label="诉求人姓名">
          <el-input v-model="queryData.demandsName" placeholder="诉求人姓名" />
        </el-form-item>
        <el-form-item label="是否回访">
          <el-select
            v-model="queryData.deptdisposeReturnIs"
            placeholder="是否回访"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="是" value="0"></el-option>
            <el-option label="否" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="办理周期">
          <el-date-picker
            v-model="queryData.timeData"
            type="daterange"
            value-format="yyyy-MM-dd"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            class="search_button"
            type="primary"
            icon="el-icon-search"
            @click="getList"
            >搜索</el-button
          >
          <el-button
            class="chongzhi_button"
            type="default"
            icon="el-icon-refresh"
            @click="onReset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      style="width: 100%; max-height: 700px"
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        :selectable="isNotSupervising"
      ></el-table-column>
      <el-table-column
        label="案件ID"
        prop="caseMainId"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="登记时间"
        width="180"
      ></el-table-column>
      <el-table-column label="简要事由" prop="checkinSummary" width="300">
        <template slot-scope="scope">
          <el-popover
            width="400"
            class="item"
            effect="dark"
            :content="scope.row.checkinSummary"
            placement="top-start"
            trigger="hover"
          >
            <span slot="reference">{{
              scope.row.checkinSummary.slice(0, 80) +
              (scope.row.checkinSummary.length > 80 ? "..." : "")
            }}</span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="gender" label="诉求人信息" width="300">
        <template slot-scope="scope">
          <div class="first">
            <i class="el-icon-s-custom"></i>
            {{ scope.row.demandsName }} | {{ scope.row.demandsSexNmae }} |
            {{ scope.row.demandsPhonenumber }}
          </div>
          <div class="first">
            <i class="el-icon-s-order"></i>
            {{ scope.row.demandsCardno }}
          </div>
          <div
            class="first"
            style="
              width: 200px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            <i class="el-icon-location"></i>
            {{ scope.row.demandsAvatar }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="contactPhone" label="相关身份信息" width="250">
        <template slot-scope="scope">
          <div
            class="first"
            v-for="(item, index) in scope.row.mdjfCasePersonList"
          >
            <i class="el-icon-s-custom"></i>
            {{ item.casePersonName }} | {{ item.casePersonCardno }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="address" label="纠纷类型" width="120">
        <template slot-scope="scope">
          <el-tag type="info">{{ scope.row.checkinDictJflxName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="department" label="办理部门" min-width="180">
        <template slot-scope="scope">
          <el-tag class="flzbbumen">{{
            scope.row.checkinDeptName || "未知"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="附件" width="50">
        <template #default="scope">
          <el-tag type="info">{{
            scope.row.deptdisposeFile
              ? scope.row.deptdisposeFile.split(",").length
              : "无"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="department" label="是否回访">
        <template slot-scope="scope">
          <div>
            <el-tag type="warning" v-if="scope.row.deptdisposeReturnIs == 1"
              >未回访</el-tag
            >
            <el-tag type="success" v-if="scope.row.deptdisposeReturnIs == 0"
              >已回访</el-tag
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="department"
        label="预计完结时间"
        width="160"
        align="center"
      >
        <template slot-scope="scope">
          <div>
            <div>{{ scope.row.disposeEndTime }}</div>
            <!-- <div v-if="scope.row.createTime && scope.row.deptdisposeReturnTime" style="font-size: 12px">用时：<span
                style="color: blue;">{{ initTime(scope.row) }}</span></div> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="department"
        label="实际用时"
        width="160"
        align="center"
      >
        <template slot-scope="scope">
          <div>
            <div
              v-if="scope.row.createTime && scope.row.deptdisposeReturnTime"
              style="font-size: 12px"
            >
              用时：<span style="color: blue">{{ initTime(scope.row) }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-has-permi="['buchongziliao']"
            size="mini"
            type="text"
            @click="handleTabBuchongzl(scope.row)"
          >
            补充资料
          </el-button>
          <el-button
            v-if="scope.row.deptdisposeReturnIs == 1"
            v-has-permi="['huifang']"
            size="mini"
            type="text"
            @click="handleTabClick(scope.row)"
          >
            回访
          </el-button>
          <el-button size="mini" type="text" @click="handleSeeItem(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" width="50%" :title="dialogTitle">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        size="small"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="24" style="margin-top: 10px">
            <el-form-item label="补充信息" prop="bcInfo">
              <el-input
                type="textarea"
                v-model="ruleForm.bcInfo"
                :rows="4"
                placeholder="补充信息"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="margin-top: 10px">
            <el-form-item label="选择文件" prop="file">
              <FileUpload v-model="fileData" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subData">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible1" width="50%" :title="dialogTitle">
      <el-form
        :model="ruleForm1"
        :rules="rules"
        ref="ruleForm1"
        size="small"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="24" style="margin-top: 10px">
            <el-form-item label="回访内容" prop="deptdisposeReturnInfo">
              <el-input
                type="textarea"
                v-model="ruleForm1.deptdisposeReturnInfo"
                :rows="4"
                placeholder="回访内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="subData1">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
        background
        @current-change="handlePageChange"
        :current-page="queryData.pageNum"
        :page-size="queryData.pageSize"
        :total="totalItems"
        layout="total, prev, pager, next"
        class="pagination"
      />
    </div>
  </div>
</template>

<script>
import { mainlist, supervising, addBczl, addDisposereturn } from "@/api/aapal";
import { status } from "nprogress";

export default {
  data() {
    return {
      fileData: "",
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dialogVisible: false,

      ruleForm: [],
      ruleForm1: [],

      deptdisposeReturnInfo: "",
      dialogTitle: "",
      queryData: {
        pageNum: 1,
        pageSize: 5,
        // disposeStatus: 2,
        timeData: [],
        disposeStatusLs: "2,3",
        status: 0,
      },
      totalItems: "",
      dialogVisible1: false,
      tableData: [],
      timer: null,
      hoverStyle: {
        backgroundColor: "#e4f7ff",
        color: "#409eff",
      },
      selectedRows: [], // 用于存储选中的行
      rules: {
        bcInfo: [
          { required: true, message: "请输入补充信息", trigger: "blur" },
        ],
        deptdisposeReturnInfo: [
          { required: true, message: "请输入补充信息", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getList();
    this.timer = setInterval(() => {
      this.getList();
    }, 60000);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    /* 查看跳转按钮 */
    handleSeeItem(row) {
      this.$router.push({
        path: "/dispose/dispose/ajChakan/",
        query: { id: row.caseMainId },
      });
    },
    /* 补充资料按钮 */
    handleTabBuchongzl(row) {
      this.caseMainId = row.caseMainId;
      this.dialogVisible = true;
      this.dialogTitle = "案件登记";
    },
    /* 确定补充资料 */
    subData(row) {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          addBczl({
            bcFile: this.fileData,
            caseMainId: this.caseMainId,
            bcInfo: this.ruleForm.bcInfo,
          }).then((res) => {
            if (res.code === 200) {
              this.$message.success("提交成功");
              this.dialogVisible = false;
              this.fileData = "";
              this.ruleForm.bcInfo = "";
              this.getList();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 判断是否已经督办，返回false则不显示复选框
    isNotSupervising(row, index) {
      return row.supervisingIs !== 0;
    },

    /* 回放按钮 */
    handleTabClick(row) {
      this.caseMainId = row.caseMainId;
      this.dialogVisible1 = true;
      this.dialogTitle = "案件回访";
      this.ruleForm.deptdisposeReturnInfo = "";
    },
    /* 确认回访 */
    subData1() {
      this.$refs["ruleForm1"].validate((valid) => {
        if (valid) {
          addDisposereturn({
            caseMainId: this.caseMainId,
            deptdisposeReturnInfo: this.ruleForm1.deptdisposeReturnInfo,
          }).then((res) => {
            if (res.code === 200) {
              this.$message.success("提交成功");
              this.dialogVisible1 = false;
              this.deptdisposeReturnInfo = "";
              this.getList();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    initTime(row) {
      if (!row || !row.createTime || !row.deptdisposeReturnTime) return "无";
      const startTime = new Date(row.createTime);
      const endTime = new Date(row.deptdisposeReturnTime);
      const timeDiff = endTime - startTime; // 计算时间差（以毫秒为单位）
      const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
      const hours = Math.floor(
        (timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
      );
      const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));

      return `${days}天${hours}时${minutes}分`;
    },

    getList() {
      const params = {
        ...this.queryData,
        startTime: this.queryData.timeData ? this.queryData.timeData[0] : "",
        endTime: this.queryData.timeData ? this.queryData.timeData[1] : "",
      };
      mainlist(params).then((res) => {
        this.tableData = res.rows;
        this.totalItems = res.total;
      });
    },

    /* 重置按钮 */
    onReset() {
      this.queryData = {
        pageNum: 1,
        pageSize: 5,
        timeData: [],
        disposeStatusLs: "2,3",
        status: 0,
      };
      this.getList();
    },

    // 处理选中的行
    handleSelectionChange(rows) {
      this.selectedRows = rows;
    },

    // 处理
    handleItem(row) {
      console.log("Handling item:", row);
    },

    // 删除
    deleteItem(row) {
      console.log("Deleting item:", row);
    },

    // 分页更改
    handlePageChange(page) {
      this.queryData.pageNum = page;
      this.getList();
    },
  },
};
</script>

<style scoped>
.container {
  margin: 20px 30px;
  font-family: "Arial", sans-serif;
}

.header {
  margin-bottom: 20px;
  background-color: #f4f7fa;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.button {
  font-size: 14px;
  padding: 8px 16px;
}

.search-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.search-input {
  width: 200px;
  margin-right: 20px;
  border-radius: 4px;
}

.search-btn,
.reset-btn {
  padding: 8px 16px;
  font-size: 14px;
}

.search-btn {
  background-color: #409eff;
  color: white;
  margin-right: 10px;
}

.reset-btn {
  background-color: #f0f2f5;
  color: #333;
}

.process-btn {
  background-color: #409eff;
  color: white;
  margin-right: 5px;
  border-radius: 4px;
}

.delete-btn {
  background-color: #f56c6c;
  color: white;
  border-radius: 4px;
}

.el-table th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.el-table td {
  font-size: 14px;
  line-height: 40px;
}

.el-table-row:hover {
  background-color: #f0f9ff;
}

.pagination {
  font-size: 14px;
}

.el-pagination__prev,
.el-pagination__next {
  background-color: #409eff;
  color: white;
}

.el-pagination__pager {
  color: #409eff;
}

.greenclass {
  color: #1ab394;
}

.redclass {
  color: #dd6161;
}
</style>
